<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link rel="stylesheet" href="../css/font.css">
    <script >
    
    function jumpLogin(){
	 window.location.href="../html/Login.html"
}

    </script>
    <title>intro</title>
    <link rel="stylesheet" href="../css/nav.css">
    <style>
        .container{
            display: flex;
            flex-direction: row;
            margin: 50px auto auto 180px;
        }
        .wrap {
            width: 500px;
            height: 500px;
            margin: 150px;
            display: flex;
            align-items: center;
        }
 
        /*得到立方体效果*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
            animation: rotate linear 20s infinite;
        }
 
        /*动画旋转的方式*/
        /*得到动画效果*/
        @-moz-keyframes rotate {                     /*firefox*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-webkit-keyframes rotate {                /*sofari chrome*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-o-keyframes rotate {                    /*opera*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*每张图片的样式*/
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            /*过渡效果*/
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>
<body>
    <ul class="topnav">
        <li><img src="../资源文件/img/Logo1.png" alt=""></li>
        <li><a class="active" href="../index.html" >首页</a></li>
        <li><a href="./WorksShow.html">作品展示</a></li>
        <li><a href="./intro.html" >系统简介</a></li>
        <li><a href="./Student_information.html">个人中心</a></li>
        <li  class="right"><a id="index_Login" href="#" onclick="jumpLogin()">立即登录</a></li> 
      </ul>
    <div class="container">
        <div class="jumbotron">
            <h1>作品展示平台</h1>
            <p>您可以在这里浏览各个学院的优秀作品，提高自己的文化素养，也可以为每个作品送上自己的小心心，也可以收到各个学院的比赛信息，积极去参与其中</p>
            <p>我们人人都可能是艺术家，也许在我们的随手一挥，一件艺术品就展现在眼前，来吧，积极参加比赛，让自己的作品展览在平台上吧！</p>
            <img src="../资源文件/img/bakc.jpg" alt="">
        </div>
        <!-- <div class="wrap">
            部署内外层图片-->
            <!-- <div class="cube">
                前面图片
                <div class="out_front">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_1.jpg" class="pic">
                </div>
                后面图片
                <div class="out_back">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_2.jpg" class="pic">
                </div>
                <!--左面图片 -->
                <!-- <div class="out_left">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_3.jpg" class="pic">
                </div>
                <!--右面图片 -->
                <!-- <div class="out_right">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_4.jpg" class="pic">
                </div>
                <!--上面图片 -->
                <!-- <div class="out_top">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_5.jpg" class="pic">
                </div> -->
                <!--下面图片 -->
                <!-- <div class="out_bottom">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_6.jpg" class="pic">
                </div> --> -->
         
                <!--小正方体 -->
                <!-- <span class="in_front">
                        <!-- <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_8.jpg" class="in_pic"> -->
                    <!-- </span>
                <span class="in_back">
                         <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_9.jpg" class="in_pic"> --> -->
                    <!-- </span>
                <span class="in_left">
                        <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_10.jpg" class="in_pic">
                    </span>
                <span class="in_right">
                        <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_11.jpg" class="in_pic">
                    </span> -->
                <!-- <span class="in_top"> --> -->
                        <!-- <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_12.jpg" class="in_pic">
                    </span>
                <span class="in_bottom">
                        <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_7.jpg" class="in_pic">
                    </span>
            </div>
        </div>  --> -->
    </div>
    
</body>
</html>